<template>
  <div>
    <div style="width:100%;" class="map" v-loading="loading">
      <div id="positionMap" style="width:100%;height:100%;z-index: 2;"></div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import carUrl from '@/assets/images/ground/carIcon/car.png'
// import BMap from 'BMap'
export default {
  props: {
    searchNumber: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      token: '',
      plateNumber: '',
      loading: false
    }
  },
   watch:{
      searchNumber:{
        deep:true,
        immediate: true,
        handler:function(newV){
          this.searchNumber = newV
        }
    }
  },
  activated () {
    this.initMap()
  },
  mounted () {
    this.initMap()
  },
  methods: {
    limitCount () {
      this.initMap()
    
      this.plateNumber = this.searchNumber
      if (!this.plateNumber) {
        this.$message({
          message: '请输入车牌号！',
          type: 'error',
          showClose: true
        })
        return false
      }
       this.getMapPosition()
    },
    getCookie (cName) {
      if (document.cookie.length > 0) {
        var cStart = document.cookie.indexOf(cName + '=')
        if (cStart !== -1) {
          cStart = cStart + cName.length + 1
          var cEnd = document.cookie.indexOf(';', cStart)
          if (cEnd === -1) cEnd = document.cookie.length
          return unescape(document.cookie.substring(cStart, cEnd))
        }
      }
      return ''
    },
 
    initMap () {
      var map = new BMap.Map('positionMap')
        map.centerAndZoom(new BMap.Point(108.37, 22.82), 11)
      // map.centerAndZoom('武汉', 7)
      // 南宁
      map.enableScrollWheelZoom(true)
      window.map = map
      this.addMapControl()
    },
    addMapControl () {
      var ctrlNav = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
      })
      window.map.addControl(ctrlNav) // 向地图中添加缩放控件
      var ctrlSca = new BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_BOTTOM_LEFT })
      window.map.addControl(ctrlSca) // 向地图中添加比例尺控件
    },
    dateFtt (fmt, date) {
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
      for (var k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      }
      return fmt
    },
    //接口还没来  接口来了换上接口
    getMapPosition () {
      let _this = this
      _this.loading = true
      _this.plateNumber = _this.searchNumber
      $.ajax({
        type: 'post',
        url:
          'https://testopen.95155.com/save/apis/vLastLocationV3?' + '&vclN=' +
          _this.plateNumber + '&timeNearby=24',
        dataType: 'jsonp',
        success: function (res) {
          var dataList = res
          dataList['result'] = dataList.data
          if (dataList.code === 0) {
            var datatime = new Date(parseInt(dataList.result.utc))
            var datatimestr = _this.dateFtt('yyyy-MM-dd hh:mm:ss', datatime)
            var getMapData = {
              receiveTime: '20190524  13:08:47',
              alertInfomation: '',
              positionDescribe: dataList.result.adr,
              positionTime: datatimestr,
              directionOfVehicle: dataList.result.drc,
              speed: dataList.result.spd,
              latitudeDegree: (dataList.result.lat / 600000).toFixed(6),
              longitudeDegree: (dataList.result.lon / 600000).toFixed(6),
              vehicleStatus: ''
            }
            _this.creatMap(getMapData)
            _this.UpdataQueryRecord()
          } else {
            _this.loading = false
            _this.$message({
              message: dataList.error,
              type: 'error',
              showClose: true
            })
          }
        },
        error: function () {
          _this.loading = false
          _this.$message({
            type: 'error',
            showClose: true,
            message: '查询失败'
          })
        }
      })
    },
    creatMap (mapPoint) {
      var position = new BMap.Point( // 获取经纬度
        mapPoint.longitudeDegree,
        mapPoint.latitudeDegree
      )
      window.map.centerAndZoom(position, 7) // 生成地图
      const deviceSize = new BMap.Size(50, 40) // 图标大小
      const deviceIcon = new BMap.Icon(carUrl, deviceSize, { // 会以base64的方式传参iconCar
        imageSize: deviceSize
      })
      var marker = new BMap.Marker(position, {icon: deviceIcon}) // 自定义图标 
      // var marker = new BMap.Marker(position) // 非自定义图标
      window.map.addOverlay(marker)
      // marker.setAnimation(window.BMAP_ANIMATION_BOUNCE)// 图标跳动显示

      var opts = {
        width: 230, // 信息窗口宽度
        height: 150, // 信息窗口高度
        title: '车辆定位信息', // 信息窗口标题
        enableMessage: false // 设置不允许信息窗发送短息
      }
      var msg =
        '车牌号：' +
        this.plateNumber +
        '</br>' +
        '速度&nbsp&nbsp&nbsp&nbsp：' +
        mapPoint.speed +
        '</br>' +
        '方向&nbsp&nbsp&nbsp&nbsp：' +
        mapPoint.directionOfVehicle +
        '</br>' +
        '经度&nbsp&nbsp&nbsp&nbsp：' +
        mapPoint.longitudeDegree +
        '</br>' +
        '纬度&nbsp&nbsp&nbsp&nbsp：' +
        mapPoint.latitudeDegree +
        '</br>' +
        '定位时间：' +
        mapPoint.positionTime +
        '</br>' +
        '所在地址：' +
        mapPoint.positionDescribe +
        '</br>'
      var infoWindow = new BMap.InfoWindow(msg, opts) // 创建信息窗口对象
      marker.addEventListener('click', function () {
        window.map.openInfoWindow(infoWindow, position) // 开启信息窗口
      })
      window.map.openInfoWindow(infoWindow, position) // 默认打开地图，不默认则注释掉
      this.loading = false
    },
  }
}
</script>
<style lang='scss' scoped>
@import "../../../../assets/css/transportRight.scss";

.map {
  height: calc(100vh - 133px);
  z-index: 999 !important;
}
#positionMap {
  z-index: 2 !important;
}
.searchEara {
  float: left;
  margin-bottom: 30px;
}
.search {
  border: none;
}
ul.table {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.table li:first-child {
  border-left: 1px solid #ccc;
}
ul.table li {
  float: left;
  width: 25%;
  font-size: 1.4rem;
  border-right: 1px solid #ccc;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
.table1 {
  background-color: #434343;
  color: #fff;
  margin-bottom: none;
}
</style>
